<template>
  <div class="recharge">
    <nav-bar>
      <img @click="$router.go(-1)" src="../../../assets/img/navbar/ic_title_back.png" slot="left" class="left" alt="">
      <span slot="center">充值详情</span>
    </nav-bar>
    <div class="content_box content_scroll">
      <h3 class="amount">+{{gameinfo.cps_fee}}</h3>
      <span class="amount_tips">获得提成(元)</span>
      <div>
        <span>实付金额:</span>
        <span style="color:#c21616;">{{gameinfo.rmb_total}}元</span>
      </div>
      <div>
        <span>游戏名称:</span>
        <span>
          {{gameinfo.gamename}}-
          <i style="color:#f48300;">BT游戏</i>
        </span>
      </div>
      <div>
        <span>游戏点位:</span>
        <span><i style="color:#c21616;">{{comment}}%</i>提成</span>
      </div>
      <div>
        <span>APP账号:</span>
        <span class="account_number" @click="copyClick" id="copy_text" :data-clipboard-text="gameinfo.username">{{gameinfo.username}}</span>
      </div>
      <div>
        <span>渠道ID:</span>
        <span>{{gameinfo.tgid}}</span>
      </div>
      <div>
        <span>代金券:</span>
        <span>未使用代金券</span>
      </div>
      <div>
        <span>游戏到账:</span>
        <span>{{gameinfo.pay_game_total}}</span>
      </div>
      <div>
        <span>充值时间:</span>
        <span>{{gameinfo.logtime | fnDate}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
import Clipboard from 'clipboard'
import {Toast} from 'vant'
  export default {
    components: { NavBar },
    data() {
      return {
        gameinfo: {},
      }
    },
    created () {
      this.gameinfo = this.$route.query.gameinfo
    },
    methods: {
      copyClick() {
        let clipboard = new Clipboard('#copy_text')
        clipboard.on('success', e => {
          Toast('已复制到剪切板')
          clipboard.destroy() // 释放内存
        })
        clipboard.on('error', e => {
          // 不支持复制
          Toast('该浏览器不支持复制')
          clipboard.destroy() // 释放内存
        })
      }
    },
    computed: {
      comment() {
        if(this.gameinfo) {
          const a = parseFloat(this.gameinfo.cps_fee)
          const b = parseFloat(this.gameinfo.rmb_total)
          const c = parseInt((a / b) * 100)
          return c || 0.00
        }
      }
    },
  }
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}

.content_box {
  width: 670px;
  padding: 0 40px;
  font-size: 24px;
  color: #535353;
}

.amount {
  font-size: 60px;
  line-height: 150px;
  text-align: center;
  color: #2f41eb;
}

.amount_tips {
  display: block;
  font-size: 22px;
  line-height: 50px;
  padding-bottom: 40px;
  text-align: center;
  font-weight: 500;
  color: #888888;
}

.content_box div {
  display: flex;
  justify-content: space-between;
  line-height: 90px;
}

.content_box div span:first-child {
  display: inline-block;
  text-align: left;
}

.content_box div span:last-child {
  display: inline-block;
  text-align: right;
}

.account_number {
  text-decoration: underline;
  color: #0c46ba;
}
</style>